<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <div th:include="common :: common-jquery"></div>
    <div th:include="common :: common-bootstrap"></div>
</head>
<body>

    <form class="container container-small" id="Form" action="return false;" th:action="@{/login}" method="post">
        <p th:text="'Hello, ' + ${record}" />

        <div class="form-group">
            <lable>name</lable>
            <input id="name" name="name" type="text" class="form-control"/>
        </div>
        <div class="form-group">
            <lable>password</lable>
            <input id="password" name="password" type="password" class="form-control"/>
        </div>
        <div class="form-group">
            <lable>code</lable>
            <input id="captcha" name="captcha" type="text" class="form-control"/>
            <img src="/valid/captcha" width="60" height="26"/>
        </div>

        <button class="btn btn-info" id="nextPageButton" type="submit">submit</button>
    </form>

    <script type="text/javascript" th:inline="javascript">
        function ajaxSubmit(){
            var data = $("#Form").serialize();
            var name = $("#name").val();
            console.log(JSON.stringify(data));

            var xmlhttp;
            if (window.XMLHttpRequest){
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            } else {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("post", "/page1");
            xmlhttp.send(name);
        }

    </script>
</body>
</html>
